<template>
  <div class="app-container">
    <el-form inline>
      <el-form-item>
        <el-input v-model="searchObj.roleName" placeholder="角色名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getRoleList">查询</el-button>
        <el-button type="default" @click="resetSearch">清空</el-button>
      </el-form-item>
    </el-form>
    <div style="margin-bottom: 20px;">
      <el-button type="primary" @click="addRole">添 加</el-button>
      <el-button type="danger" @click="removeRoles()" :disabled="selectedRoles.length === 0"> 批量删除</el-button>
    </div>
    <!-- table表格 -->
    <el-table border stripe :data="roleList" v-loading="loading" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" width="80" align="center" label="序号"></el-table-column>
      <el-table-column label="角色名称">
        <template slot-scope="{row}">
          <template v-if="row.edit">
            <el-input v-model="row.roleName" class="edit-input" size="small"></el-input>
            <el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(row)">取消</el-button>
          </template>
          <span v-else>{{ row.roleName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="{row}">
          <FengButton type="info" size="mini" icon="el-icon-user-solid" title="分配权限" 
          @click="$router.push(`/acl/role/auth/${row.id}?roleName=${row.roleName}`)" />
          <FengButton type="primary" size="mini" icon="el-icon-check" title="确定" v-if="row.edit" @click="updateRole(row)" />
          <FengButton type="primary" size="mini" icon="el-icon-edit" title="修改角色" v-else  @click="row.edit=true"/>
          <FengButton type="danger" size="mini" icon="el-icon-delete" title="删除角色" @click="removeRole(row)" />

        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination :current-page="currentPage" :total="total" :page-size="pageSize" :page-sizes="[3, 5, 10, 20]"
      style="padding: 20px 0;" layout="prev, pager, next, jumper, ->, sizes, total" @current-change="currentChange"
      @size-change="sizeChange"></el-pagination>


  </div>
</template>
<script>
export default {
  name: 'RoleList',
  data() {
    return {
      //分页器
      currentPage: 1,
      total: 0,
      pageSize: 3,

      //table数据
      searchObj: {
        roleName: '',
      },
      loading: false, // 是否显示列表加载的提示
      roleList: [],
      selectedRoles: [], //选中的角色列表
    }
  },
  mounted() {
    this.getRoleList();
  },
  methods: {
    //当前页更改后回调
    currentChange(val) {
      this.currentPage = val;
      this.getRoleList();

    },
    //显示条数更改后回调
    sizeChange(val) {
      this.pageSize = val;
      this.getRoleList();
    },
    //获取角色列表信息
    async getRoleList() {
      this.loading = true;
      const result = await this.$API.role.getPageList(this.currentPage, this.pageSize, this.searchObj);
      this.loading = false;
      this.roleList = result.data.items.map(r => {
        r.edit = false;
        r.originRoleName = r.roleName;
        return r;
      });
      this.total = result.data.total;

    },

    handleSelectionChange(selection) {
      this.selectedRoles = selection
    },
    //清空-回调
    resetSearch() {
      this.searchObj.roleName = '';
      this.getRoleList();
    },
    //添加用户角色
    addRole() {
      // 显示添加界面
      this.$prompt('请输入新名称', '添加角色', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.$API.role.save({ roleName: value }).then(result => {
          this.$message.success(result.message || '添加角色成功')
          this.getRoleList()
        })
      }).catch(() => {
        this.$message.warning('取消添加')
      })
    },
    //批量删除
    removeRoles() {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        const ids = this.selectedRoles.map(role => role.id)
        const result = await this.$API.role.removeRoles(ids)
        this.getRoleList()
        this.$message({
          type: 'success',
          message: '批量删除成功!'
        })
      }).then((result) => {

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
      
    // 删除指定的角色    
    removeRole ({id, roleName}) {
      this.$confirm(`确定删除 '${roleName}' 吗?`, '提示', {
        type: 'warning'
      }).then(async () => {
        const result = await this.$API.role.removeById(id)
        if(this.roleList.length===1){
          this.currentPage-=1;
        }
        this.getRoleList()
        this.$message.success(result.message || '删除成功!')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    //取消修改
    cancelEdit(row){
      row.roleName = row.originRoleName
      row.edit = false
      this.$message.warning('取消角色修改')
    },
    //更新角色信息
    updateRole (role) {
      this.$API.role.updateById({id: role.id, roleName: role.roleName})
        .then(result => {
          this.$message.success(result.message|| '更新角色成功!')
          this.getRoles(this.page)
        })
    },

  },


}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>